<template>
    <div>
        <div class="header">
      <div class="logo">
        <img src="/img/logo_485365e.png">
      </div>
      <div class="nav">
        <div class="biao1">
          <p>服务案列
            <img src="/img/jiantou.png">
          </p>
          <ul>
            <li><a href="#">企业</a></li>
            <li><a href="#">市政单位</a></li>
            <li><a href="#">高校</a></li>
          </ul>
        </div>
        <div class="biao1">
          <p>产品介绍
            <img src="/img/jiantou.png">
          </p>
          <ul>
            <li><a href="#"  @click="huan(1)">内容</a></li>
            <li><a href="#"  @click="huan(2)">产品</a></li>
            <li><a href="#"  @click="huan(3)">服务</a></li>
            <li><a href="#"  @click="huan(4)">智能硬件</a></li>
          </ul>
        </div>
        <div class="biao1">
            <p><a href="#">关于我们</a></p>
        </div>
      </div>
      <div class="you">
        <span class="nav_list">
          <a href="#">电脑端体验</a>
        </span>
        <span class="nav_item">
          <a href="#">移动段体验</a>
          <i>
            <img src="/img/download.png">
          </i>
        </span>
        <button class="btn">申请使用</button>
      </div>
        </div>
        <navb></navb>
        <div class="container">
            <ul class="tabBar fixed-bar" @click="toggle(event)">
                <li :class="num==1? 'active':''" :data-num="1" @click="huan(1)">内容</li>
                <li :class="num==2? 'active':''" :data-num="2" @click="huan(2)">产品</li>
                <li :class="num==3? 'active':''" :data-num="3" @click="huan(3)">服务</li>
                <li :class="num==4? 'active':''" :data-num="4" @click="huan(4)">智能硬件</li>
            </ul>
            <div class="tabbar-hide"></div>
            <div class="main-content" v-if="i==1">
                <div class="main content">
                    <!-- 书籍资源 -->
                    <div class="book-resource main-item">
                        <h2>书籍资源</h2>
                        <ul>
                            <li class="my-4">
                                <img src="//b.zhangyue.com/static/img/2.0/p-book1_a2a180a.png">
                                <div>
                                    <h4>电子书资源</h4>
                                    <p class="text2 mt-2">版权资源：国内外700家出版社<br>
                                        书籍数量：20万册正版电子书<br>
                                        党建书籍：“新时代&nbsp;新经典:学习习近平新时代中国特色社会主义思想重点数字图书专栏”<br>
                                        榜单优势：大奖书系、畅销书榜单覆盖度高<br>
                                    </p>
                                </div>
                            </li>
                            <li class="my-4">
                                <img src="//b.zhangyue.com/static/img/2.0/p-book2_159ec16.png" alt="">
                                <div>
                                    <h4>有声书资源</h4>
                                    <p class="text2 mt-2">资源数量：超过15万集有声资源
                                        <br>
                                        名家解读：600本名家解读<br>
                                        大咖课程：34种经典大咖课程<br>
                                    </p>
                                </div>
                            </li>
                            <li class="my-4">
                                <img src="//b.zhangyue.com/static/img/2.0/p-book3_5febad2.png" alt="">
                                <div>
                                    <h4>书库自动更新</h4>
                                    <p class="text2 mt-2">每周上架2000-3000册新书<br>
                                        精选书城近4年出版上市新书占比60%<br>
                                        近三年上市新书占比50%<br>
                                    </p>
                                </div>
                            </li>
                            <li class="mt-4">
                                <img src="//b.zhangyue.com/static/img/2.0/p-book4_eace54d.png" alt="">
                                <div>
                                    <h4>纸质书</h4>
                                    <p class="text2 mt-2">海量正版书籍，各种类新书同步上市<br>品类覆盖齐全，纸书+数字资源整体采购<br>超1000家出版社和图书公司深入合作<br>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 正版支持 -->
                    <div class="copyrights main-item">
                        <h2 class="mb-4">正版支持</h2>
                        <ul>
                            <li>
                                <img class="mb-1" src="//b.zhangyue.com/static/img/2.0/copyright1_c90d71b.png" alt="">
                                <p>全国版权示范单位</p>
                            </li>
                            <li>
                                <img class="mb-1" src="//b.zhangyue.com/static/img/2.0/copyright2_9913557.png" alt="">
                                <p>世界知识产权组织版权金奖</p>
                            </li>
                            <li>
                                <img class="mb-1" src="//b.zhangyue.com/static/img/2.0/copyright3_c119644.png" alt="">
                                <p>中国出版政府奖.先进出版单位</p>
                            </li>
                        </ul>
                        <h2 class="mb-4 mt-8">出版社覆盖</h2>
                        <div class="img-content">
                            <img src="//b.zhangyue.com/static/img/2.0/press-pic_2dae9c1.png">
                        </div>
                        <p class="more">...</p>
                    </div>
                    <!-- 品类覆盖 -->
                    <div class="cates main-item">
                        <h2>品类覆盖</h2>
                        <p class="my-4">书籍涵盖时政、社科、经管、文学、科技、艺术等等21个领域；细分为政治、党建、文学、法律、经济、管理、历史、亲子等60个分类，可以满足不同机构的阅读需求</p>
                        <img src="//b.zhangyue.com/static/img/2.0/cate-img_ed5ba15.png" alt="">
                    </div>
                    <!-- 新时代新经典 -->
                    <div class="new-era main-item">
                        <h2>“新时代&nbsp;新经典:学习习近平新时代中国特色社会主义思想重点数字图书专栏”</h2>
                        <p class="my-4 w-100">中宣部指导、16家出版社授权，共139种重点数字图书，包括习近平总书记著作集、单行本、论述摘编、语言典故、思想研究/学习体会、生活经历等六大类，涵盖经济、政治、文化、社会、党建、外交等领域。</p>
                        <img src="//b.zhangyue.com/static/img/2.0/new-era_439f9c6.png" alt="">
                    </div>
                </div>
            </div>
            <div class="main product" v-else-if="i==2">
                    <!-- 职工用户端适配 -->
                    <div class="product-child1 main-item ">
                        <h2 class="mb-8">职工用户端</h2>
                        <div>
                            <img src="//b.zhangyue.com/static/img/2.0/book-resource_d5f5b68.png" alt="">
                            <p>掌阅精选为用户提供多端阅读支持，满足职工的不同阅读需求，支持：App端、H5端、PC端、微信端、大屏一体机、电子阅读器等终端</p>
                        </div>
                    </div>
                    <!-- 协同阅读 -->
                    <div class="reader main-item swiper-modle">
                        <h2 class="mb-4">协同阅读</h2>
                        <div class="swiper swiper-bg">
                            <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="reader-swiper">
                                <ul class="swiper-wrapper" >
                                    <li class="swiper-slide swiper-slide-active" style="width: 720px;">
                                        <h4>团队共读书</h4>
                                        <p class="mt-1 mb-2">专为政企事业单位打造，支持多人共同阅读一本书，
                                            成员进度可见，笔记可查，互相交流学习</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner1_4ca1d16.png" alt="团队共读书">
                                    </li>
                                    <li class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 720px;">
                                        <h4>阅读打卡</h4>
                                        <p class="mt-1 mb-2 w-100">趣味的阅读打卡玩法，激发职工参与动力</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner4_f799560.png" alt="阅读打卡">
                                    </li>
                                    <li class="swiper-slide" data-swiper-slide-index="2" style="width: 720px;">
                                        <h4>阅读计划</h4>
                                        <p class="mt-1 mb-2 w-100">制定个人阅读计划，系统每天提醒，养成阅读好习惯</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner3_be8dde8.png" alt="">
                                    </li>
                                    <li class="swiper-slide" data-swiper-slide-index="3" style="width: 720px;">
                                        <h4>IM即时通信</h4>
                                        <p class="mt-1 mb-2 w-100">无需跳转第三方工具，即可进行一对一私聊，也可以加入读书群或自建读书群；</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner5_d22f9e1.png" alt="">
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="4" style="width: 720px;">
                                        <h4>阅读社区</h4>
                                        <p class="mt-1 mb-2 w-100">职工的读书角，职工可以随时分享读书心得，
                                            机构的公告台，机构的重要信息可置顶发布</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner2_6968e09.png" alt="">
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 720px;">
                                        <h4>团队共读书</h4>
                                        <p class="mt-1 mb-2">专为政企事业单位打造，支持多人共同阅读一本书，
                                            成员进度可见，笔记可查，互相交流学习</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/reader-banner1_4ca1d16.png" alt="团队共读书">
                                    </li>
                                </ul>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                            </div>
                            <div class="swiper-pagination swiper-pagination-bullets" id="reader-swiper-pagination">
                                <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                                <span class="swiper-pagination-bullet"></span>
                                <span class="swiper-pagination-bullet"></span>
                                <span class="swiper-pagination-bullet"></span>
                                <span class="swiper-pagination-bullet"></span>
                            </div>
                            <div class="swiper-button-prev" id="reader-swiper-prev" tabindex="0" role="button" aria-label="Previous slide">
                            </div>
                            <div class="swiper-button-next" id="reader-swiper-next" tabindex="0" role="button" aria-label="Next slide">
                            </div>
                        </div>
                        <p class="mt-8 know-more">想要了解更多，详询：400-881-3311</p>
                    </div>
                    <!-- 阅读体验 -->
                    <div class="reader-experience main-item">
                        <h2 class="mb-7">阅读体验</h2>
                        <ul>
                            <li>
                                <img src="//b.zhangyue.com/static/img/2.0/experience-1_e77b7c5.png" alt="">
                                <p class="grey-color">支持全端书籍搜索，全文内容搜索<br>
                                    AI智能语音朗读，真人语音朗读<br>
                                    阅读时可划线、作批注，所有笔记可导出<br>
                                    多种字体、字号、背景、翻页方式可选<br>
                                    支持阅读背景音乐，更沉浸的阅读体验<br>
                                </p>
                            </li>
                            <li>
                                <img src="//b.zhangyue.com/static/img/2.0/experience2_ffa13f7.png" alt="">
                                <p class="grey-color">十年阅读产品打磨，精致排版，完美复刻纸质书阅读体验</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 机构管理后台 -->
                    <div class="admin-system swiper-modle main-item">
                        <h2 class="mb-4">机构管理后台</h2>
                        <div class="swiper swiper-bg">
                            <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="admin-swiper">
                                <ul class="swiper-wrapper" style="transform: translate3d(-720px, 0px, 0px); transition-duration: 0ms;">
                                    <li class="swiper-slide" style="width: 720px;">
                                        <h4>配置管理</h4>
                                        <p class="mt-1 mb-2">支持进行机构图书馆的频道及展示配置，支持App启动图片的更换
                                        </p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin-4_c9a566c.png" alt="">
                                    </li>
                                    <li class="swiper-slide" style="width: 720px;">
                                        <h4>人员管理</h4>
                                        <p class="mt-1 mb-2">人员添加和删除，支持批量导入职工信息
                                            支持分组，可按照公司、部门等维度进行分组</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin-1_955d26d.png" alt="">
                                    </li>
                                    <li class="swiper-slide" style="width: 720px;">
                                        <h4>数据看板</h4>
                                        <p class="mt-1 mb-2 w-100">
                                            可查看阅读人数、阅读时长及书籍阅读排名等多维度信息<br>
                                            数据统计栏目可查看详细阅读数据，支持数据导出</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin2_03b5f24.png" alt="">
                                    </li>
                                    <li class="swiper-slide" style="width: 720px;">
                                        <h4>书籍管理</h4>
                                        <p class="mt-1 mb-2 w-100">查看所有可用及已购书籍，可分类筛选查看，也可搜索查找<br>
                                            支持机构自主选择套餐书籍，加入套餐的书籍职工可免费阅读</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin3_ead9ead.png" alt="">
                                    </li>
                                    <li class="swiper-slide" style="width: 720px;">
                                        <h4>配置管理</h4>
                                        <p class="mt-1 mb-2">支持进行机构图书馆的频道及展示配置，支持App启动图片的更换
                                        </p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin-4_c9a566c.png" alt="">
                                    </li>
                                <li class="swiper-slide " style="width: 720px;">
                                        <h4>人员管理</h4>
                                        <p class="mt-1 mb-2">人员添加和删除，支持批量导入职工信息
                                            支持分组，可按照公司、部门等维度进行分组</p>
                                        <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/admin-1_955d26d.png" alt="">
                                    </li></ul>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                            <div class="swiper-pagination swiper-pagination-bullets" id="admin-swiper-pagination">
                                <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                                <span class="swiper-pagination-bullet"></span>
                                <span class="swiper-pagination-bullet"></span>
                                <span class="swiper-pagination-bullet"></span>
                            </div>
                            <div class="swiper-button-prev" id="admin-swiper-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
                            <div class="swiper-button-next" id="admin-swiper-next" tabindex="0" role="button" aria-label="Next slide"></div>
                        </div>
                        <p class="mt-8 know-more">想要了解更多，详询：010-59231343 转分机号 858</p>
                    </div>
                
            </div>
            <div class="main service" v-else-if="i==3">
                      <!-- 内容服务 -->
                      <div class="contents-service main-item swiper-modle">
                          <h2 class="mb-4">内容服务</h2>
                          <div class="swiper swiper-bg">
                              <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="contents-swiper">
                                  <ul class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-720px, 0px, 0px);"><li class="swiper-slide swiper-slide-duplicate swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 720px;">
                                          <h4>阅读报告</h4>
                                          <p class="mt-1 mb-2">掌阅精选为机构提供月度/年度阅读报告，机构阶段学习情况总结</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/contents-service1_e6dfe26.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>阅读专题</h4>
                                          <p class="mt-1 mb-2 w-100">针对社会热点、节假日、机构特征等，打造每周一期专属阅读专题
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/contents-service2_e8e94b8.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="1" style="width: 720px;">
                                          <h4>阅读报告</h4>
                                          <p class="mt-1 mb-2">掌阅精选为机构提供月度/年度阅读报告，机构阶段学习情况总结</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/contents-service1_e6dfe26.png" alt="">
                                      </li>
                                  <li class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>阅读专题</h4>
                                          <p class="mt-1 mb-2 w-100">针对社会热点、节假日、机构特征等，打造每周一期专属阅读专题
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/contents-service2_e8e94b8.png" alt="">
                                      </li></ul>
                              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                              <div class="swiper-pagination swiper-pagination-bullets" id="contents-swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
                              <div class="swiper-button-prev" id="contents-swiper-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
                              <div class="swiper-button-next" id="contents-swiper-next" tabindex="0" role="button" aria-label="Next slide"></div>
                          </div>
                      </div>
                      
                      <!-- 活动服务 -->
                      <div class="active-service main-item swiper-modle">
                          <h2 class="mb-4">活动服务</h2>
                          <div class="swiper swiper-bg">
                              <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="actives-swiper">
                                  <ul class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-720px, 0px, 0px);"><li class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="3" style="width: 720px;">
                                          <h4>读书评测</h4>
                                          <p class="mt-1 mb-2 w-100">优化阅读成果，掌握书籍重点
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-4_27db04e.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>线上共读会</h4>
                                          <p class="mt-1 mb-2">多人共读一本书，互相分享增进动力，
                                              配合线上社群或线下交流小组，效果更佳</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-1_6015765.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 720px;">
                                          <h4>话题活动（盖楼、投票）</h4>
                                          <p class="mt-1 mb-2 w-100">节假日和社会热点话题活动，充分表达自己
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-2_976f323.png" alt="">
                                      </li>
                                      <li class="swiper-slide" data-swiper-slide-index="2" style="width: 720px;">
                                          <h4>阅读打卡</h4>
                                          <p class="mt-1 mb-2 w-100">闯关式读书比赛，让严肃阅读不再严肃
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-3_b047e0e.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="3" style="width: 720px;">
                                          <h4>读书评测</h4>
                                          <p class="mt-1 mb-2 w-100">优化阅读成果，掌握书籍重点
                                          </p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-4_27db04e.png" alt="">
                                      </li>
                                  <li class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>线上共读会</h4>
                                          <p class="mt-1 mb-2">多人共读一本书，互相分享增进动力，
                                              配合线上社群或线下交流小组，效果更佳</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/activeservice-1_6015765.png" alt="">
                                      </li></ul>
                              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                              <div class="swiper-pagination swiper-pagination-bullets" id="actives-swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
                              <div class="swiper-button-prev" id="actives-swiper-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
                              <div class="swiper-button-next" id="actives-swiper-next" tabindex="0" role="button" aria-label="Next slide"></div>
                          </div>
                      </div>
                      <!-- 特色服务 -->
                      <div class="unique-service main-item swiper-modle">
                          <h2 class="mb-4">特色服务</h2>
                          <div class="swiper swiper-bg">
                              <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="uniques-swiper">
                                  <ul class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-720px, 0px, 0px);"><li class="swiper-slide swiper-slide-duplicate swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 720px;">
                                          <h4>品牌宣传</h4>
                                          <p class="mt-1 mb-2 w-100">可定制App开屏、图书馆名称、机构logo、职工加V特权等</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/uniques-2_90b8a61.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>书库定制</h4>
                                          <p class="mt-1 mb-2">根据机构需求搭建专属书库</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/uniques-1_d9b4773.png" alt="">
                                      </li>
                                      <li class="swiper-slide swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="1" style="width: 720px;">
                                          <h4>品牌宣传</h4>
                                          <p class="mt-1 mb-2 w-100">可定制App开屏、图书馆名称、机构logo、职工加V特权等</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/uniques-2_90b8a61.png" alt="">
                                      </li>
                                  <li class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 720px;">
                                          <h4>书库定制</h4>
                                          <p class="mt-1 mb-2">根据机构需求搭建专属书库</p>
                                          <img class="mb-3" src="//b.zhangyue.com/static/img/2.0/uniques-1_d9b4773.png" alt="">
                                      </li></ul>
                              <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                              <div class="swiper-pagination swiper-pagination-bullets" id="uniques-swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
                              <div class="swiper-button-prev" id="uniques-swiper-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
                              <div class="swiper-button-next" id="uniques-swiper-next" tabindex="0" role="button" aria-label="Next slide"></div>
                          </div>
                      </div>
            </div>
            <div class="main facility hide" v-else>
                    <div class="facility-platform main-item">
                        <h2 class="mb-4">掌阅精选数字阅览室</h2>
                        <img src="//b.zhangyue.com/static/img/2.0/facility-1_d4c4f5c.png" alt="掌阅精选数字阅览室">
                    </div>
                    <div class="all-in-one main-item">
                        <h2 class="mb-8">数字阅览室硬件-数字借阅一体机</h2>
                        <div class="all-inone-item">
                            <img src="//b.zhangyue.com/static/img/2.0/facility-2_15aa568.png" alt="掌阅精选数字阅览室">
                            <div class="f-16">
                                <h5>尺寸</h5>
                                <p class="grey-color mb-3">43寸高清触摸屏</p>
                                <h5>资源</h5>
                                <p class="grey-color mb-3">云端20万册精品电子书、15万集精品听书，600册名家解读、多种大咖课程</p>
                                <h5>阅读方式</h5>
                                <p class="grey-color mb-3">手机APP、微信扫码阅读</p>
                                <h5>信息展示</h5>
                                <p class="grey-color">机构logo、通知公告、运营位、机构服务功能等基本信息；<br>新书上架、热度榜、推荐榜等书单信息；<br>职工阅读书目、阅读时长等数据信息；</p>
                            </div>
                        </div>
                    </div>
                    <div class="facility-ireader main-item">
                        <h2 class="mb-8">数字阅览室硬件-iReader电子阅读器</h2>
                        <ul>
                            <li>
                                <img src="//b.zhangyue.com/static/img/2.0/facility-3_f56e053.png" alt="">
                                <div>
                                    <h4 class="fw-500 f-16">阅读器概况</h4>
                                    <p class="my-2 grey-color">符合国人使用的操作系统。满足职工阅读学习的需求。</p>
                                    <p class="grey-color">智能精排版、舒适阅读灯、WIFI传书、内置词典翻译”等，体验极致，功能强大，方便学习阅读和商务使用。</p>
                                    <p class="mt-2 grey-color">国家权威机构鉴定具备护眼功能<br>
                                        2019年，掌阅iReader电子书阅读器经过眼睛健康安全评估体系（ECAP）测试后，结果达到护眼五星级标准，并得到国家眼科诊断与治疗工程技术研究中心的认证。
                                    </p>
                                </div>
                            </li>
                            <li class="mt-6">
                                <div class="facility-item">
                                    <img src="//b.zhangyue.com/static/img/2.0/facility-4-1_e943d7b.png" alt="">
                                    <div>
                                        <h4 class="mt-3 fw-500">Light 青春版</h4>
                                        <h5 class="mt-2 fw-500">产品特性：</h5>
                                        <p class="grey-color">轻薄、便捷携带阅读本</p>
                                        <h5 class="mt-2 fw-500">性能参数</h5>
                                        <p class="grey-color">
                                            储存：8GB<br>
                                            重量：142g，薄至8mm<br>
                                            操作系统：iReader UI 4.0<br>
                                            屏幕参数：6英寸Eink高清墨水屏、212ppi<br>
                                            电池续航：1500mAh电池，一次充电，数周续航<br>
                                        </p>
                                    </div>
    
    
                                </div>
                                <div class="facility-item">
                                    <img src="//b.zhangyue.com/static/img/2.0/facility-4-2_a21d0bc.png" alt="">
                                    <div>
                                        <h4 class="mt-3 fw-500">iReader Smart 系列新款</h4>
                                        <h5 class="mt-2 fw-500">产品特性：</h5>
                                        <p class="grey-color">手写/投屏/录音/绘画/阅读/听书</p>
                                        <h5 class="mt-2 fw-500">性能参数</h5>
                                        <p class="grey-color">
                                            储存：32GB<br>
                                            重量：370g，薄至7.1mm<br>
                                            操作系统：iReader UI 4.0<br>
                                            屏幕参数：10.3英寸、227ppi、Eink墨水屏<br>
                                            电池续航：4300mAh电池，一次充电，数周续航<br>
                                        </p>
                                    </div>
    
                                    &nbsp;
                                </div>
                            </li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
    
</template>
<script>
import Navb from '../testing/Navb.vue'
export default {
    components:{Navb},
    data() {
        return {
            i:1,
            num:1
        }
    },
    methods:{
        huan(i){
            this.i=i;
        },
        toggle(e){
           this.num= event.target.getAttribute('data-num');
        //    console.log(this.num);
        }
    }
}
</script>
<style scoped>
.header{
  max-width: 1200px;
  height: 48px;
  line-height: 48px;
  margin: 0 auto;
  padding: 0 4rem;
  z-index: 1;
  box-shadow: 0 1px 1px rgb(94  121  159 / 15%);
}
.logo{
  align-items: center;
  width: 115px;
  height: 48px;
  float: left;
  display: flex;
}
.logo > img{
  
  width: 100%;
  align-items: center;
}
.nav{
  padding-left: 90px;
  display: flex;
  width: 336px;
  height: 48px;
  /* justify-content: space-around; */
}
.nav .biao1 > p{
  width: 112px;
  height: 48px;
  text-align: center;
}
.biao1 ul{
  background-color: #fff;
  box-shadow: 
  1px -1px 2px rgb(94 121 159 / 15%), 
  1px 1px 2px rgb(94 121 159 / 15%), 
  1px 1px 2px rgb(94 121 159 / 15%), 
  -1px 1px 2px rgb(94 121 159 / 15%);
}
.header .nav div:hover p,.header .nav div:hover p > a{
  color: #5788d9;
  cursor: pointer;
}
.nav .biao1 ul>li:hover a{
  color: #5788d9;
}
.header .nav div:hover ul{
  display: block;
}

.header .nav div:nth-child(1) p, .header .nav div:nth-child(2) p{
  padding: 0rem 0.26rem;
  font-size: .14rem;
}
.header .nav div p > img{
  top: 19px;
  width: 0.6rem;
  height: 0.6rem;
  transform:rotate(180deg) ;
}
.nav .biao1 p:hover img{
  transform:rotate(360deg) ;
}
.nav > .biao1 > p , .nav > .biao1  p > a,.nav > .biao1  li > a{
  font-size: 14px;
  color: #555555;
  text-decoration: none;
} 
.biao1>ul{
  list-style: none;
  line-height: 30px;
  text-align: center;
  display: none;
}
.you{
  float: right;
  top: -49px;
  position: relative;
  display: flex;
}
.you a{
  text-decoration: none;
}
.you span{
  padding-right: 20px;
  display: block;
}
.you span a{
  color: #444444;
  font-size: 14px;
  text-align: center;
  color: #444;
  font-size: 15px;
}
.header .you span:hover a{
  color: #5788d9;
}
.nav_item i>img{
  display: none;
  width: 112px;height: 112px;
  border-radius: 5px;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -64px;
  border: 6px solid #f0f6fe;
  box-sizing: border-box;
}
.header .you span:hover i>img{
  display: block;
}
.btn:hover{
  background-color: #007aff;
  cursor: pointer;
}
.btn{
  width: 84px;height: 32px;
  font-size: 14px;
  line-height: 32px;
  color: #fff;
  display: inline-block;
  border-radius: 16px;
  text-align: center;
  margin-left: .6rem;
  background-color: #5788d9;
  border: 1px;
  margin-top: 10px;
}



/* 内容 */
.myswipe{
    height: 480px;
}
.tabBar{
    width: 100%;
    height: 48px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.tabBar .active{
    color: #5788D9;
}
.tabBar li{
    padding: 4px 4px;
    font-size: 18px;
    margin: 0 52px;
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.tabBar .active::after {
    content: '';
    position: absolute;
    width: 48px;
    height: 4px;
    background: #5788D9;
    border-radius: 2px;
    bottom: 0;
    left: 50%;
    margin-left: -24px;
}
.container .content .book-resource{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 96px 120px;
}

.container .content .book-resource ul{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    width: 565px;
}
h2{
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    color: #262626;
   }
   .my-4{
    margin-top: 48px;
    margin-bottom: 48px;
   }
.container .content .book-resource ul li{
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
}

.container .content .book-resource ul li img {
    width: 180px;
    height: 180px;
    margin-right: 72px;
}
.container .content .book-resource ul li div {
    flex: 1;
}
.container .content .book-resource h4 {
    font-size: 24px;
    color: #262626;
    font-weight: 500;
}
.container .content .book-resource .text2 {
    font-size: 14px;
    color: #8c8c8c;
    line-height: 2px;
    line-height: 24px;
    font-size: 16px;
}
.mt-2{
    margin-top: 24px;
}

/* 正版支持 */
.container .content .main-item{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 96px 120px;
}
.container .main-item:nth-child(even) {
    background-color: #F7F8FA;
}
.copyrights ul{
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.copyrights ul li{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}
.copyrights ul li img{
    width: 368px;
    height: 259px;
}
.copyrights ul li p {
    font-size: 24px;
    font-weight: 500;
}
.mt-8{
    margin-top: 96px;
   }
.mb-1 {
    margin-bottom: 12px;
}
.mb-4{
    margin-bottom: 48px;
}
.copyrights .img-content img {
    width: 1192px;
    height: 226px;
}
.copyrights .more {
    font-size: 24px;
    color: #262626;
    line-height: 33px;
    text-align: center;
}

/* 品类覆盖 */
.cates p, .new-era p {
    font-size: 16px;
    color: #8C8C8C;
    line-height: 24px;
}
.cates img {
    width: 1200px;
}
.new-era img {
    width: 888px;
}
.w-100{
    width: 100%;
}

/* 后三个css */
.container .product .product-child1 {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    padding: 96px 0;
    background: url(//b.zhangyue.com/static/img/2.0/book-resourcebg_492b203.png) no-repeat 247px 240px;
    background-size: 542px 542px;
}
.mb-8 {
    margin-bottom: 96px;
}
.container .product .product-child1 div {
    position: relative;
    width: 803px;
    height: 541px;
}
.container .product .product-child1 img{
    width: 803px;
}
.container .product .product-child1 p {
    width: 410px;
    position: absolute;
    top: 83px;
    right: 54px;
    font-size: 16px;
    line-height: 22px;
    color: #8C8C8C;
}
/* 全局 */
h2{
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    color: #262626;
}
.main-item{
    width: calc(100% - 1px);
    overflow: hidden;
}
/* 协同 */
.container .product .reader,.container .product .reader-experience,.container .swiper-modle,.container .facility .main-item{
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding: 96px 120px;
}
.container .main-item:nth-child(even) {
    background-color: #F7F8FA;
}
.container .swiper {
    width: 100%;
    position: relative;
    padding: 43px 120px;
    background: #FBFBFC;
}
.swiper-bg::before {
    content: '';
    position: absolute;
    left: 160px;
    bottom: 0;
    width: 320px;
    height: 347px;
    background: url(//b.zhangyue.com/static/img/2.0/slider-left_dfcf54f.png) no-repeat center;
    background-size: 100% 100%;
}
.container .swiper-container {
    width: 720px;
    height: 468px;
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}
.container .swiper-container .swiper-slide {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}
.swiper-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
}
.container .swiper-container .swiper-slide h4 {
    font-weight: 500;
    font-size: 16px;
}
.container .swiper-container .swiper-slide p {
    font-size: 16px;
    line-height: 22px;
    color: #8C8C8C;
    text-align: center;
}
/* boot引入 */
.mb-2{
    margin-bottom: 24px;
    margin-top: 12px;
    width: 100%;
}
.mb-3 {
    margin-bottom: 36px;
}
/* 正文 */
.container .swiper-container .swiper-slide img {
    width: 720px;
}
.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}
.container .swiper .swiper-pagination {
    position: absolute;
    left: 48%;
    bottom: -45px;
}
.swiper-pagination {
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
}
.container .swiper .swiper-pagination span {
    margin: 0 6px;
}
.container .swiper .swiper-pagination-bullet {
    background: #D9D9D9;
    opacity: 1;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
}
.container .swiper .swiper-pagination-bullet-active {
    background: #5788D9;
}
.container .swiper .swiper-button-prev {
    left: 200px;
}
.container .swiper .swiper-button-prev, .container .swiper .swiper-button-next {
    outline: 0;
    border: 1px solid #5788D9;
    border-radius: 18px;
    width: 62px;
    height: 36px;
    background: rgba(87,136,217,.04);
    right: auto;
}
.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
.container .swiper .swiper-button-prev::after {
    background: url(//b.zhangyue.com/static/img/2.0/arrow-left_f9ecb56.png) no-repeat center;
    background-size: 100% 100%;
}
.container .swiper .swiper-button-next::after {
    background: url(//b.zhangyue.com/static/img/2.0/arrow-right_349b715.png) no-repeat center;
    background-size: 100% 100%;
}
.container .swiper .swiper-button-prev::after, .container .swiper .swiper-button-next::after {
    font-size: 16px;
    color: #5788D9;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
}
.container .swiper .swiper-button-next {
    right: 200px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}
.swiper-bg::after {
    content: '';
    position: absolute;
    right: 120px;
    bottom: 0;
    width: 230px;
    height: 271px;
    background: url(//b.zhangyue.com/static/img/2.0/slider-right_93dacc3.png) no-repeat center;
    background-size: 100% 100%;
}
.container .know-more {
    color: #BFBFBF;
    margin-top: 96px;
    font-size: 14px;
}

/* 阅读体验 */
.container .main-item:nth-child(odd) {
    background-color: inherit;
}
.mb-7{
    margin-bottom: 84px;
}
.container .product .reader-experience ul {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}
.container .product .reader-experience ul li {
    width: 986px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 84px;
}
.container .product .reader-experience ul li img {
    width: 578px;
    margin-right: 97px;
}
.container .product .reader-experience ul li p {
    width: 312px;
}
.grey-color {
    font-size: 16px;
    line-height: 22px;
    color: #8C8C8C;
}

/* 智能硬件 */
.container .main-item:nth-child(odd) {
    background-color: inherit;
  }
  .main-item:nth-child(odd) {
    background-color: #F7F8FA;
  }
  
  
  /* 主体 */
  .mb-4 {
    margin-bottom: 48px;
  }
  .container .facility .facility-platform img {
    width: 600px;
    height: 645px;
  }
  .container .facility .all-in-one .all-inone-item {
    width: 980px;
    height: 559px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  .container .facility .all-in-one img {
    width: 348px;
  }
  .container .facility .all-in-one div {
    width: 560px;
  }
  .f-16 {
    font-size: 16px!important;
  }
  .container .facility .all-in-one h5 {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 16px;
  }
  .mb-3 {
    margin-bottom: 36px;
  }
  .grey-color {
    font-size: 16px;
    line-height: 22px;
    color: #8C8C8C;
  }
  .container .facility .facility-ireader ul li:nth-child(1) {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding-bottom: 72px;
    border-bottom: 1px solid #ECECEC;
  }
  .container .facility .facility-ireader ul li {
    width: 980px;
  }
  .container .facility .facility-ireader ul li:nth-child(1) img {
    width: 348px;
    height: 374px;
  }
  .container .facility .facility-ireader ul li:nth-child(1) div {
    width: 560px;
  }
  .fw-500 {
    font-weight: 500;
  }
  .my-2 {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .mt-2 {
    margin-top: 24px;
  }
  .mt-6 {
    margin-top: 72px;
  }
  .container .facility .facility-ireader ul li:nth-child(2) {
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  .container .facility .facility-ireader ul li:nth-child(2) .facility-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
  }
  .container .facility .facility-ireader ul li:nth-child(2) img {
    width: 348px;
    height: 265px;
  }

</style>